// 变量
@use "sass:color";

// ================================= 基础 =================================
// 颜色
$base-color-transparent: transparent;
$base-color-white: #ffffff;
$base-color-black: #000000;
$base-color-red: #ff0000;
$base-color-green: #00ff00;
$base-color-blue: #0000ff;
$base-color-yellow: #ffff00;
$base-color-pink: #ff00ff;
$base-color-cyan: #00ffff;
$base-color-purple: #800080;
$base-color-orange: #ffa500;
$base-color-gold: #ffd700;
$base-color-silver: #c0c0c0;
$base-color-bronze: #cd7f32;
// 主色调
$base-color-primary: #3498db;
$base-color-primary-translucent: rgba($base-color-primary, 0.5);
$base-color-primary-light: color.adjust($base-color-primary, $lightness: 20%);
$base-color-primary-dark: color.adjust($base-color-primary, $lightness: -20%);
// 辅助色
$base-color-secondary: #2ecc71;
$base-color-secondary-translucent: rgba($base-color-secondary, 0.5);
$base-color-secondary-light: color.adjust($base-color-secondary, $lightness: 20%);
$base-color-secondary-dark: color.adjust($base-color-secondary, $lightness: -20%);
// 成功色
$base-color-success: #4cd964;
$base-color-success-translucent: rgba($base-color-success, 0.5);
$base-color-success-light: color.adjust($base-color-success, $lightness: 20%);
$base-color-success-dark: color.adjust($base-color-success, $lightness: -20%);
// 危险色
$base-color-danger: #ff3b31;
$base-color-danger-translucent: rgba($base-color-danger, 0.5);
$base-color-danger-light: color.adjust($base-color-danger, $lightness: 20%);
$base-color-danger-dark: color.adjust($base-color-danger, $lightness: -20%);
// 警告色
$base-color-warning: #f1c40f;
$base-color-warning-translucent: rgba($base-color-warning, 0.5);
$base-color-warning-light: color.adjust($base-color-warning, $lightness: 20%);
$base-color-warning-dark: color.adjust($base-color-warning, $lightness: -20%);
// 信息色
$base-color-info: #34e2e2;
$base-color-info-translucent: rgba($base-color-info, 0.5);
$base-color-info-light: color.adjust($base-color-info, $lightness: 20%);
$base-color-info-dark: color.adjust($base-color-info, $lightness: -20%);
// 灰色调
$base-color-gray-100: #ededed;
$base-color-gray-200: #d7d7d7;
$base-color-gray-300: #c0c0c0;
$base-color-gray-400: #a9a9a9;
$base-color-gray-500: #929292;
$base-color-gray-600: #7b7b7b;
$base-color-gray-700: #646464;
$base-color-gray-800: #4d4d4d;
$base-color-gray-900: #363636;
$base-color-gray-1000: #1f1f1f;

// 字体
$base-font-family-primary: "Segoe UI", "Tahoma", "Geneva", "Verdana", "sans-serif";
$base-font-family-secondary: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
$base-font-family-monospace: "Courier New", "Courier", "monospace";
// 字体大小
$base-font-size: 1rem; // ~16px
$base-font-size-sm: $base-font-size * 0.875; // ~14px
$base-font-size-lg: $base-font-size * 1.25; // ~20px
$base-font-size-h1: $base-font-size * 1.7; // ~24px
$base-font-size-h2: $base-font-size * 1.45; // ~22px
$base-font-size-h3: $base-font-size * 1.3; // ~20px
$base-font-size-h4: $base-font-size * 1.15; // ~18px
$base-font-size-h5: $base-font-size; // ~16px
$base-font-size-h6: $base-font-size * 0.97; // ~15px
// 字体粗细
$base-font-weight: 500;
$base-font-weight-100: 100;
$base-font-weight-200: 200;
$base-font-weight-300: 300;
$base-font-weight-400: 400;
$base-font-weight-500: 500;
$base-font-weight-600: 600;
$base-font-weight-700: 700;
$base-font-weight-800: 800;
$base-font-weight-900: 900;

// 尺寸
$base-width: 100%;
$base-height: 100%;

// 间距
$base-spacing: 8px;
$base-spacing-sm: $base-spacing * 0.5;
$base-spacing-lg: $base-spacing * 2;

// 边框
$base-border-width: 1px;
$base-border-style: solid;
$base-border-color: $base-color-gray-300;
$base-border-radius: 10px;
$base-border-radius-sm: $base-border-radius * 0.5;
$base-border-radius-lg: $base-border-radius * 2;

// 阴影
$base-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
$base-box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
$base-box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
$base-box-shadow-none: none;

// 动画
$base-animation: 1s;
$base-animation-fast: $base-animation * 0.5;
$base-animation-slow: $base-animation * 2;

// 过渡
$base-transition: all $base-animation ease-in-out;
$base-transition-fast: all $base-animation-fast ease-in-out;
$base-transition-slow: all $base-animation-slow ease-in-out;

// 高斯模糊半径
$base-filter-blur: 10px;

// 间隙
$base-gap-xs: 0.4rem;
$base-gap-sm: 0.8rem;
$base-gap-md: 1rem; // ~12px
$base-gap-lg: 1.2rem;
$base-gap-xl: 1.6rem;

// 布局
$base-header-height: 5rem;
$base-footer-height: 6rem;
$base-container-width: 100%;
$base-navbar-width: 160px;
$base-aside-width: 266px;

// ================================= 引用 =================================
// 文本
$base-text-align: left;
$base-text-transform: none;
$base-text-decoration: none;
$base-text-line-height: 1.5;
$base-text-letter-spacing: 0.5px;
$base-text-word-spacing: 0.5px;
$base-text-font-family: $base-font-family-primary;
$base-text-font-size: $base-font-size;
$base-text-font-weight: $base-font-weight;
// 主要文本颜色
$base-text-color-light: $base-color-black;
$base-text-color-light-translucent: rgba($base-text-color-light, 0.5);
$base-text-color-light-opaque: rgba($base-text-color-light, 0.8);
$base-text-color-light-hover: color.adjust($base-text-color-light, $lightness: 20%);
$base-text-color-light-active: color.adjust($base-text-color-light, $lightness: 30%);

$base-text-color-dark: $base-color-white;
$base-text-color-dark-translucent: rgba($base-text-color-dark, 0.5);
$base-text-color-dark-opaque: rgba($base-text-color-dark, 0.8);
$base-text-color-dark-hover: color.adjust($base-text-color-dark, $lightness: 20%);
$base-text-color-dark-active: color.adjust($base-text-color-dark, $lightness: 30%);
// 次要文本颜色
$base-text-color-secondary-light: $base-color-gray-1000;
$base-text-color-secondary-light-translucent: rgba($base-text-color-secondary-light, 0.5);
$base-text-color-secondary-light-opaque: rgba($base-text-color-secondary-light, 0.8);
$base-text-color-secondary-light-hover: color.adjust($base-text-color-secondary-light, $lightness: 20%);
$base-text-color-secondary-light-active: color.adjust($base-text-color-secondary-light, $lightness: 30%);

$base-text-color-secondary-dark: $base-color-gray-100;
$base-text-color-secondary-dark-translucent: rgba($base-text-color-secondary-dark, 0.5);
$base-text-color-secondary-dark-opaque: rgba($base-text-color-secondary-dark, 0.8);
$base-text-color-secondary-dark-hover: color.adjust($base-text-color-secondary-dark, $lightness: 20%);
$base-text-color-secondary-dark-active: color.adjust($base-text-color-secondary-dark, $lightness: 30%);

// 按钮
$base-btn-color-light: $base-color-primary-light;
$base-btn-color-light-translucent: rgba($base-btn-color-light, 0.5);
$base-btn-color-light-hover: color.adjust($base-btn-color-light, $lightness: 20%);
$base-btn-color-light-active: color.adjust($base-btn-color-light, $lightness: 30%);
$base-btn-color-light-disabled: $base-color-gray-400;

$base-btn-color-dark: $base-color-primary-dark;
$base-btn-color-dark-translucent: rgba($base-btn-color-dark, 0.5);
$base-btn-color-dark-hover: color.adjust($base-btn-color-dark, $lightness: 20%);
$base-btn-color-dark-active: color.adjust($base-btn-color-dark, $lightness: 30%);
$base-btn-color-dark-disabled: $base-color-gray-400;

// 链接
$base-link-color-light: color.adjust($base-color-primary, $lightness: 10%);
$base-link-color-light-visted: color.adjust($base-link-color-light, $lightness: 10%);
$base-link-color-light-hover: color.adjust($base-link-color-light, $lightness: 20%);
$base-link-color-light-active: color.adjust($base-link-color-light, $lightness: 30%);

$base-link-color-dark: color.adjust($base-color-primary, $lightness: -10%);
$base-link-color-dark-visted: color.adjust($base-link-color-dark, $lightness: 10%);
$base-link-color-dark-hover: color.adjust($base-link-color-dark, $lightness: 20%);
$base-link-color-dark-active: color.adjust($base-link-color-dark, $lightness: 30%);

// 整体背景
$base-bg-color-light: rgba($base-color-gray-200, 0.3);
$base-bg-color-light-translucent: rgba($base-bg-color-light, 0.5);
$base-bg-color-light-opaque: rgba($base-bg-color-light, 0.7);
$base-bg-color-light-hover: color.adjust($base-bg-color-light, $lightness: 20%);
$base-bg-color-light-active: color.adjust($base-bg-color-light, $lightness: 30%);

$base-bg-color-dark: rgba($base-color-gray-900, 0.3);
$base-bg-color-dark-translucent: rgba($base-bg-color-dark, 0.5);
$base-bg-color-dark-opaque: rgba($base-bg-color-dark, 0.7);
$base-bg-color-dark-hover: color.adjust($base-bg-color-dark, $lightness: 20%);
$base-bg-color-dark-active: color.adjust($base-bg-color-dark, $lightness: 30%);

$base-bg-filter-blur: $base-filter-blur * 2;

// 模块背景
$base-module-bg-color-light: rgba($base-color-gray-400, 0.3);
$base-module-bg-color-light-translucent: rgba($base-module-bg-color-light, 0.5);
$base-module-bg-color-light-opaque: rgba($base-module-bg-color-light, 0.7);
$base-module-bg-color-light-hover: color.adjust($base-module-bg-color-light, $lightness: 20%);
$base-module-bg-color-light-active: color.adjust($base-module-bg-color-light, $lightness: 30%);

$base-module-bg-color-dark: rgba($base-color-gray-700, 0.3);
$base-module-bg-color-dark-translucent: rgba($base-module-bg-color-dark, 0.5);
$base-module-bg-color-dark-opaque: rgba($base-module-bg-color-dark, 0.7);
$base-module-bg-color-dark-hover: color.adjust($base-module-bg-color-dark, $lightness: 20%);
$base-module-bg-color-dark-active: color.adjust($base-module-bg-color-dark, $lightness: 30%);
$base-module-bg-filter-blur: $base-filter-blur * 4;
